<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考勤打卡</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button v-waves type="primary" class="btn" @click="clockin"
      >上班打卡</el-button
    >
    <el-button v-waves type="primary" class="btn" @click="clockout"
      >下班打卡</el-button
    >
    <el-calendar :first-day-of-week="7">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <p>
          {{ data.day.split("-").slice(1).join("-") }}<br />
          {{ dealMyDate(data.day) }}
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<style>
.btn {
  margin-top: 20px;
  height: 200px;
  width: 200px;
  border-radius: 100px;
  color: #fff;
  background-color: #334157;
  padding: 1rem 2rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  outline: 0;
  border: 0;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
}
</style>

<script>
import waves from "@/components/waves";
import { onduty, offduty, getRecordByUid } from "../../api/recordMG";
export default {
  directives: { waves },
  data() {
    return {
      resDate: [],
      form: {
        uid: null,
        identity: "",
        name: "",
      },
    };
  },
  components: {},
  created() {
    this.form = JSON.parse(localStorage.getItem("userdata"));
    getRecordByUid(this.form.uid).then((res) => {
      this.resDate = res.data.data;
    });
  },
  methods: {
    dealMyDate(v) {
      let len = this.resDate.length;
      let massage = "";
      for (let i = 0; i < len; i++) {
        var date = new Date(this.resDate[i].rtime);
        let Y = date.getFullYear();
        let M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        let D = date.getDate();
        let date2 = Y + "-" + M + "-" + D;
        if (date2 == v) {
          massage = massage + "\n" + this.resDate[i].rstate;
        }
      }
      return massage;
    },
    clockin() {
      onduty(this.form)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "上班打卡成功！",
            });
            getRecordByUid(this.form.uid).then((res) => {
              this.resDate = res.data.data;
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.$message.error("上班打卡失败，请稍后再试！");
        });
    },
    clockout() {
      offduty(this.form)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "下班打卡成功！",
            });
            getRecordByUid(this.form.uid).then((res) => {
              this.resDate = res.data.data;
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.$message.error("下班打卡失败，请稍后再试！");
        });
    },
  },
};
</script>